<template>
  <div>
    <app-header></app-header> 
    <div class="main">
      <div class="timeDiv">倒计时 {{minute}}:{{second}}</div>
      <div v-for="(list,i) in questionList" :key="i" v-if="i==num">
        <ul class="nav">
          <li>
            <span class="titleNum">{{list.index}}</span>
            <span class="quesType" v-if="list.type=='单选'">({{list.type}})</span>
            <span class="quesType" v-if="list.type=='多选'">({{list.type}})</span>
            <span class="quesType" v-if="list.type=='判断'">({{list.type}})</span>
            <span class="content">{{list.content}}</span>
          </li>
          <li v-for="(item, ind) in list.options" :key="ind" @click="selectAnswer(item,list)">
            <span class="option" :class="list.yourAnswer.indexOf(item.value)>-1?'active':''">{{item.value}}</span>
            <span class="optionContent">{{item.label}}</span>
          </li>
        </ul>
        <ul class="nav1" v-if="isExam">
          <li>
            <span class="analysis">参考答案：</span>
            <span>{{list.answer}}</span>
          </li>
          <li>
            <span class="analysis">试题解析：</span>
            <span>{{list.analyse?list.analyse:'暂无解析'}}</span>
          </li>
        </ul>
      </div>
      <div style="text-align: center;">
        <span class="btn" v-if="num!=0" @click="num=num-1">上一题</span>
        <span class="btn" v-if="num<questionList.length-1" @click="showMsg">下一题</span>
      </div>

    </div>
    <div class="bottom bottom1">
      <ul class="nav2">
        <li>
          <em class="bule_icon" @click="show=true"></em>{{num+1}}/{{totalQuestion}}
        </li>
        <li @click="show2=true" v-if="!isExam">
          <em class="false_icon"></em>交卷
        </li>
      </ul>
    </div>
    <div v-transfer-dom>
      <popup v-model="show">
        <div class="popup2">
          <div class="bottom">
            <div>
              <ul class="nav2">
                <li>
                  <em class="bule_icon"></em>{{num+1}}/{{totalQuestion}}
                </li>
                <li @click="show2=true">
                  <em class="false_icon"></em>交卷
                </li>
              </ul>
            </div>
            <div style="clear:both;padding:5px 0">
              <ul class="nav3">
                <li v-for="(i,index) in totalQuestion" :key="index" @click="num=index">
                  <span class="subjectNum" v-bind:class="[index==num? 'redColor':'geenColor']">{{i}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </popup>
    </div>
    <div v-transfer-dom class="answer">
      <popup v-model="show1">
        <div class="msgDiv">
          <img src="../../assets/images/notice.png">
          <p>当前题目为最后一题</p>
          <span class="confirmBtn" @click="show1=false">确 &nbsp; &nbsp;定</span>
        </div>
      </popup>
    </div>
    <div v-transfer-dom class="answer">
      <popup v-model="show2">
        <div class="msgDiv">
          <img src="../../assets/images/notice.png">
          <p>是否确定交卷?</p>
          <span class="confirmBtn1" @click="show2=false">取  &nbsp;&nbsp; 消</span><span class="confirmBtn" @click="submitExam">确 &nbsp;&nbsp; 定</span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import {
    TransferDom,
    Popup,
    Group,
    Cell,
    XButton,
    XSwitch,
    Toast,
    XAddress,
    ChinaAddressData,
    Alert
  } from "vux";
  import { getExam, submitExam } from '@/api/trainClass';
  export default {
    directives: {
      TransferDom
    },
    components: {
      "app-header": Header,
      Popup,
      Group,
      Cell,
      XSwitch,
      Toast,
      XAddress,
      XButton,
      Alert
    },
    data() {
      return {
        index: 0,
        num: 0,
        show: false,
        show1: false,
        show2: false,
        trainClassId: '',
        questionList: [],
        question: null,
        totalQuestion: 0,
        interval: null,
        examTime: 0,
        lastTime: 0,
        minute: '00',
        second: '00',
        examType: 2,
        isExam: false
      };
    },
    created() {
      let that = this;
      this.trainClassId = this.$route.query.id;
      this.examType = this.$route.query.type;
      getExam({ trainClassId: this.trainClassId }).then(
        response => {
          this.questionList = response.questionList;
          this.totalQuestion = response.choiceNum + response.mulChoiceNum + response.judgeNum;
          that.lastTime = response.examTime * 60;
          that.interval = setInterval(function () {
            if (that.lastTime > 0) {
              that.lastTime -= 1;
              that.examTime += 1;
              var minute = parseInt(that.lastTime / 60);
              var second = that.lastTime % 60;
              if (minute < 10) {
                that.minute = '0' + minute;
              } else {
                that.minute = minute;
              }
              if (second < 10) {
                that.second = '0' + second;
              } else {
                that.second = second;
              }
            } else {
              that.submitExam();
            }
          }, 1000);
        }
      );
    },
    methods: {
      showMsg() {
        this.num = this.num + 1;
        if (this.num == this.questionList.length - 1) {
          this.show1 = true;
        }
      },
      selectAnswer(item, list) {
        if (list.type == '单选' || list.type == '判断') {
          list.yourAnswer = item.value;
        } else {
          if (list.yourAnswer.indexOf(item.value) == -1) {
            list.yourAnswer.push(item.value);
          } else {
            let index = list.yourAnswer.indexOf(item.value);
            list.yourAnswer.splice(index, 1);
          }
        }
      },
      submitExam() {
        this.show2 = false;
        clearInterval(this.interval);
        let that = this;
        submitExam({ trainClassId: this.trainClassId, examType: this.examType, questionList: this.questionList, examTime: this.examTime }).then(response => {
          var message = '您本次考试分数为' + response.examScore + '分,成绩' + (response.isPass ? '合格' : '不合格');
          this.questionList = response.questionList;
          this.$vux.alert.show({
            content: message,
            onHide() {
              if (that.examType == 2) {
                that.isExam = true;
              }
              else {
                that.$router.push({ path: '/accessTrain', query: { id: that.trainClassId } });
              }
            }
          });
        });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .answer .vux-popup-dialog {
    position: fixed;
    left: calc((100% - 290px)/2);
    top: 150px;
    width: 290px;
    height: 170px !important;
    border-radius: 10px;
    background: #ffffff;
    overflow-y: visible;
  }
</style>>
<style scoped>
  .main {
    padding: 17px 15px 0 15px;
    text-align: left;
  }

  ul {
    list-style-type: none;
  }
   .nav{
     padding-top:30px;
   }
  .nav li {
    margin-bottom: 25px;
  }

  .nav1 {
    margin-top: 30px;
  }

    .nav1 li {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: bold;
    }

  .titleNum {
    display: inline-block;
    width: 21px;
    height: 21px;
    text-align: center;
    border-radius: 5px;
    background-color: #2269ff;
    color: #ffffff;
    line-height: 21px;
    font-size: 11px;
    font-weight: bold;
  }

  .quesType {
    display: inline-block;
    color: #2269ff;
    padding-left: 5px;
    font-size: 15px;
    vertical-align: middle;
    font-weight: bold;
  }

  .content {
    font-size: 15px;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: bold;
  }

  .option {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 15px;
    border: solid 1px #979797;
    text-align: center;
    line-height: 17px;
    margin-right: 5px;
    font-weight: bold;
  }

  .optionContent {
    font-size: 14px;
    font-weight: bold;
  }

  .active {
    background-color: #0abd2b;
    color: #ffffff;
    border: none;
  }

  .btn {
    display: inline-block;
    height: 45px;
    font-size: 15px;
    background-color: #2269ff;
    font-weight: bold;
    line-height: 45px;
    width: 120px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 25px;
    margin: 25px 15px 0px 30px;
  }

  .analysis {
    color: #2269ff;
  }

  .bottom {
    background-color: #2269ff;
    height: 50px;
    color: #ffffff;
  }

  .bottom1 {
    width: 100%;
    position: fixed;
    bottom: 0;
  }

  .nav2 {
    clear: both;
  }

    .nav2 li {
      float: right;
      margin-right: 30px;
      margin-left: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
    }

  .bule_icon {
    display: inline-block;
    background: url("../../assets/images/wabTm.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .false_icon {
    display: inline-block;
    background: url("../../assets/images/hand.png") no-repeat center center;
    background-size: 100%;
    width: 22px;
    height: 26px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .popup2 {
    padding-bottom: 15px;
    height: 325px;
    background-color: #ffffff;
  }

  .nav3 {
    display: inline;
    text-align: center;
  }

    .nav3 li {
      display: inline-block;
      width: 20%;
      margin-top: 14px;
    }

  .subjectNum {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    background-color: #eeeeee;
    font-size: 15px;
    color: #333333;
  }

  .geenColor {
    border: solid 1px #0ebe2e;
  }

  .redColor {
    border: solid 1px #fa4444;
  }

  .timeDiv {
    font-size: 17px;
    color: #fe6000;
    text-align: center;
    padding-bottom: 15px;
  }

  .msgDiv {
    text-align: center;
    padding: 13px 25px 20px 25px;
  }

    .msgDiv img {
      height: 50px;
      width: 50px;
    }

    .msgDiv p {
      font-size: 15px;
      color: #fe6000;
      font-weight: bold;
      margin-top: 5px;
    }

  .confirmBtn {
    display: inline-block;
    height: 40px;
    font-size: 15px;
    background-color: #2269ff;
    font-weight: bold;
    line-height: 40px;
    width: 100px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 16px;
  }

  .confirmBtn1 {
    display: inline-block;
    height: 40px;
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
    width: 100px;
    color: #2269ff;
    text-align: center;
    border-radius: 10px;
    margin-top: 16px;
    border: solid 1px #2269ff;
    margin-right: 10px;
  }
</style>
